import React, { PropsWithChildren, useContext, useState } from "react";
import { CountContextProvider } from "./count";

const VisibleContext = React.createContext<{
  visible: boolean;
  setVisible: (i: boolean) => void;
} | null>(null);

export const VisibleContextProvider: React.FC<PropsWithChildren<object>> = ({
  children,
}) => {
  const [visible, setVisible] = useState<boolean>(false);

  return (
    <VisibleContext.Provider value={{ visible, setVisible }}>
      <CountContextProvider>{children}</CountContextProvider>
    </VisibleContext.Provider>
  );
};

export const useVisibleContext = () => useContext(VisibleContext)!;